<template>
    <div class="person">
        <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
        <h2>当前求和为：{{sum}}</h2>
        <button @click="changeSum">点我sum+1</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { ref, watch } from 'vue';

let sum = ref(0)

const changeSum = () => {
    sum.value++
}
// 监视，情况一：监视【ref】定义的【基本类型】数据
const stopWatch = watch(sum,(newVal,oldVal)=>{
    console.log('sum变化了',newVal,oldVal)
    if (newVal >= 10){
        // 停止监视
        stopWatch()
    }
})
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>